<template>
	<view>
		<view class="header">
			设备
		</view>
		<view class="data">
			<view class="data-wrapper" @click="databut1">
				<view class="data-title" style="position: fixed;top: 140rpx;">
					<text style="position: absolute;top: 1rpx;color: #ffffff;font-size: large;font-weight: 600;">节点一</text>
				</view>
				<image class="jb-logo" style="position: fixed;top: 220rpx;left: 280rpx;" src="../../static/icon/alarm.png"/>
				<image class="kg-logo" style="position: fixed;top: 370rpx;left: 280rpx;" src="../../static/icon/switch.png"/>
				<view class="jd-name">
					<text style="position: fixed;top: 210rpx;left: 65rpx; #000000;font-size: calc(16px);font-weight: 550;">节点一</text>
					<image class="jd-logo" style="position: fixed;top: 213rpx;left: 25rpx;" src="../../static/icon/configureed.png"></image>
				</view>
					<view class="Tem">
						<text style="position: fixed;top: 290rpx;left: 80rpx; #000000;font-size: calc(13px);">{{Tem_mes}}℃</text>
						<image class="Tem-logo" style="position: fixed;top: 290rpx;left: 20rpx;" src="../../static/icon/tem.png"></image>
					</view>
					<view class="Hum">
						<text style="position: fixed;top: 290rpx;left: 210rpx; #000000;font-size: calc(13px);">{{Hum_mes}}%</text>
						<image class="Hum-logo" style="position: fixed;top: 290rpx;left: 150rpx;" src="../../static/icon/hem.png"></image>
					</view>
					<view class="Lig">
						<text style="position: fixed;top: 390rpx;left: 80rpx; #000000;font-size: calc(13px);">{{Lig_mes}}lx</text>
						<image class="Lig-logo" style="position: fixed;top: 390rpx;left: 20rpx;" src="../../static/icon/light.png"></image>
					</view>
					<view class="co2">
						<text style="position: fixed;top: 390rpx;left: 210rpx; #000000;font-size: calc(13px);">{{co2_mes}}</text>
						<image class="co2-logo" style="position: fixed;top: 390rpx;left: 150rpx;" src="../../static/icon/co2.png"></image>
					</view>
			</view>
			
			<view class="data-wrapper" @click="databut2" style="float: right;">
				<view class="data-title" style="position: fixed;top: 140rpx;">
					<text style="position: absolute;top: 1rpx;color: #ffffff;font-size: large;font-weight: 600;">节点二</text>
				</view>
				<image class="jb-logo" style="position: fixed;top: 220rpx;left: 655rpx;" src="../../static/icon/alarm.png"/>
				<image class="kg-logo" style="position: fixed;top: 370rpx;left: 655rpx;" src="../../static/icon/switch.png"/>
				<view class="jd-name">
					<text style="position: fixed;top: 210rpx;left: 440rpx; #000000;font-size: calc(16px);font-weight: 550;">节点二</text>
					<image class="jd-logo" style="position: fixed;top: 213rpx;left: 400rpx;" src="../../static/icon/configureed.png"></image>
				</view>
					<view class="Tem">
						<text style="position: fixed;top: 290rpx;left: 460rpx; #000000;font-size: calc(13px);">{{Tem_mes}}℃</text>
						<image class="Tem-logo" style="position: fixed;top: 290rpx;left: 400rpx;" src="../../static/icon/tem.png"></image>
					</view>
					<view class="Hum">
						<text style="position: fixed;top: 290rpx;left: 590rpx; #000000;font-size: calc(13px);">{{Hum_mes}}%</text>
						<image class="Hum-logo" style="position: fixed;top: 290rpx;left: 530rpx;" src="../../static/icon/hem.png"></image>
					</view>
					<view class="Lig">
						<text style="position: fixed;top: 390rpx;left: 460rpx; #000000;font-size: calc(13px);">{{Lig_mes}}lx</text>
						<image class="Lig-logo" style="position: fixed;top: 390rpx;left: 400rpx;" src="../../static/icon/light.png"></image>
					</view>
					<view class="co2">
						<text style="position: fixed;top: 390rpx;left: 590rpx; #000000;font-size: calc(13px);">{{co2_mes}}</text>
						<image class="co2-logo" style="position: fixed;top: 390rpx;left: 530rpx;" src="../../static/icon/co2.png"></image>
					</view>
			</view>
			
			<view class="data-wrapper" @click="databut3">
				<view class="data-title" style="position: fixed;top: 510rpx;">
					<text style="position: absolute;top: 1rpx;color: #ffffff;font-size: large;font-weight: 600;">节点三</text>
				</view>
				<image class="jb-logo" style="position: fixed;top: 590rpx;left: 280rpx;" src="../../static/icon/alarm.png"/>
				<image class="kg-logo" style="position: fixed;top: 740rpx;left: 280rpx;" src="../../static/icon/switch.png"/>
				<view class="jd-name">
					<text style="position: fixed;top: 580rpx;left: 65rpx; #000000;font-size: calc(16px);font-weight: 550;">节点三</text>
					<image class="jd-logo" style="position: fixed;top: 583rpx;left: 25rpx;" src="../../static/icon/configureed.png"></image>
				</view>
					<view class="Tem">
						<text style="position: fixed;top: 660rpx;left: 80rpx; #000000;font-size: calc(13px);">{{Tem_mes}}℃</text>
						<image class="Tem-logo" style="position: fixed;top: 660rpx;left: 20rpx;" src="../../static/icon/tem.png"></image>
					</view>
					<view class="Hum">
						<text style="position: fixed;top: 660rpx;left: 210rpx; #000000;font-size: calc(13px);">{{Hum_mes}}%</text>
						<image class="Hum-logo" style="position: fixed;top: 660rpx;left: 150rpx;" src="../../static/icon/hem.png"></image>
					</view>
					<view class="Lig">
						<text style="position: fixed;top: 760rpx;left: 80rpx; #000000;font-size: calc(13px);">{{Lig_mes}}lx</text>
						<image class="Lig-logo" style="position: fixed;top: 760rpx;left: 20rpx;" src="../../static/icon/light.png"></image>
					</view>
					<view class="co2">
						<text style="position: fixed;top: 760rpx;left: 210rpx; #000000;font-size: calc(13px);">{{co2_mes}}</text>
						<image class="co2-logo" style="position: fixed;top: 760rpx;left: 150rpx;" src="../../static/icon/co2.png"></image>
					</view>
			</view>
			
			<view class="data-wrapper" @click="databut1">
				<view class="data-title" style="position: fixed;top: 510rpx;">
					<text style="position: absolute;top: 1rpx;color: #ffffff;font-size: large;font-weight: 600;">节点四</text>
				</view>
				<image class="jb-logo" style="position: fixed;top: 590rpx;left: 650rpx;" src="../../static/icon/alarm.png"/>
				<image class="kg-logo" style="position: fixed;top: 740rpx;left: 650rpx;" src="../../static/icon/switch.png"/>
				<view class="jd-name">
					<text style="position: fixed;top: 580rpx;left: 440rpx; #000000;font-size: calc(16px);font-weight: 550;">节点四</text>
					<image class="jd-logo" style="position: fixed;top: 583rpx;left: 400rpx;" src="../../static/icon/configureed.png"></image>
				</view>
					<view class="Tem">
						<text style="position: fixed;top: 660rpx;left: 460rpx; #000000;font-size: calc(13px);">{{Tem_mes}}℃</text>
						<image class="Tem-logo" style="position: fixed;top: 660rpx;left: 400rpx;" src="../../static/icon/tem.png"></image>
					</view>
					<view class="Hum">
						<text style="position: fixed;top: 660rpx;left: 590rpx; #000000;font-size: calc(13px);">{{Hum_mes}}%</text>
						<image class="Hum-logo" style="position: fixed;top: 660rpx;left: 530rpx;" src="../../static/icon/hem.png"></image>
					</view>
					<view class="Lig">
						<text style="position: fixed;top: 760rpx;left: 460rpx; #000000;font-size: calc(13px);">{{Lig_mes}}lx</text>
						<image class="Lig-logo" style="position: fixed;top: 760rpx;left: 400rpx;" src="../../static/icon/light.png"></image>
					</view>
					<view class="co2">
						<text style="position: fixed;top: 760rpx;left: 590rpx; #000000;font-size: calc(13px);">{{co2_mes}}</text>
						<image class="co2-logo" style="position: fixed;top: 760rpx;left: 530rpx;" src="../../static/icon/co2.png"></image>
					</view>
			</view>
<!-- 			<view @click="try">
				点击
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		  return {
			  Tem_mes: '0.0',
			  Hum_mes: '0.0',
			  Lig_mes: datalig,
			  co2_mes: '0.0'
		  };
		},
    methods: {
      /**
       * 打开用户信息页
       */
      databut1() {
		uni.navigateTo({
			url: '../data/data1',
		}),
		console.log('点击')
      },
	  databut2() {
	  		uni.navigateTo({
	  			url: '../data/data2',
	  		}),
	  		console.log('点击')
	  },
	  databut3() {
	  		uni.navigateTo({
	  			url: '../data/data3',
	  		}),
	  		console.log('点击')
	  },
	  update_ligdata(res){
		  console.log("我被触发了")
		  // const _this = this,
		  // datalig = _this
		console.log(res.data.data.data)
		 datalig = res.data.data.data
	  }
    },
	  	onShow(options) {
	  		const _this = this;
	  		 uni.$on('update_ligdata',function(res){
	  		 	console.log('开始监听update_ligdata事件');
	  		 	_this.update_ligdata(res);
	  		 });
	  	}
	}
</script>

<style>
	.header {
			background-color: #1477da;
			font-size: calc(40rpx);
			color: #ffffff;
			width: 100%;
			text-align: left;
			padding: 15rpx;
			padding-top: 50rpx;
			padding-left: 70rpx;
	}
	.data-wrapper {
		background-color: #fff;
		width: 42%;
		height: 160px;
		border-radius: 20px;
		display: inline-block;

		justify-content: space-around;
		padding: 8px;
		margin: 15rpx;
		box-shadow: #d6d6d6 0px 0px 5px;
	}
	.data-title {
		
		border-radius: 10px;
		padding: 15rpx;
		height: 10px;
		width: 39%;
		background-color: #4CD964;
	}
	.jb-logo {
		height: 45px;
		width: 45px;
	}
	.kg-logo {
		height: 45px;
		width: 45px;
	}
	.jd-logo {
		height: 20px;
		width: 20px;
	}
	.Tem-logo {
		height: 25px;
		width: 25px;
	}
	.Hum-logo {
		height: 25px;
		width: 25px;
	}
	.Lig-logo {
		height: 25px;
		width: 25px;
	}
	.co2-logo {
		height: 25px;
		width: 25px;
	}
</style>
